/*
 * @Descripttion: 
 * @version: 1.0.0
 * @Author: shuaishuai.han
 * @Date: 2022-04-25 13:57:01
 */
const {
  publicPath, devServer
} = require('./config');
const { chainWebpackNoConsole, chainSvgRuleConfig } = require('./config/plugin');

const chainWebpackGloablConfig = (config) => {
  config.plugin('html').tap((args) => {
    args[0].title = '';
    return args;
  });
}

module.exports = {
  publicPath: publicPath,
  devServer,
  productionSourceMap: false,
  chainWebpack: config => {
    // 移除prefetch插件，避免加载多余的资源
    config.plugins.delete('prefetch');
    // 移除 preload 插件，避免加载多余的资源
    config.plugins.delete('preload');
    config.optimization.splitChunks({
      chunks: 'all'
    });
    chainWebpackGloablConfig(config);
    // 生产环境去除console
    chainWebpackNoConsole(config);
    // svg
    chainSvgRuleConfig(config);
  },
  css: {
    loaderOptions: {
      postcss: {
        plugins: [
          require("autoprefixer")({
            browsers: 'last 5 version',
            overrideBrowserslist: [
              "Android 4.1",
              "iOS 7.1",
              "Chrome > 31",
              "ff > 31",
              "ie >= 8",
              "last 5 versions", // 所有主流浏览器最近10版本用
            ],
            grid: true,
          }),
          require("postcss-pxtorem")({
            rootValue: 37.5, // 结果为：设计稿元素尺寸/16，比如元素宽320px,最终页面会换算成 20rem
            propList: ["*"], // 是一个存储哪些将被转换的属性列表，这里设置为['*']全部，假设需要仅对边框进行设置，可以写['*', '!border*']
            unitPrecision: 5, // 保留rem小数点多少位
            //selectorBlackList: ['.radius'],  //则是一个对css选择器进行过滤的数组，比如你设置为['fs']，那例如fs-xl类名，里面有关px的样式将不被转换，这里也支持正则写法。
            replace: true,
            mediaQuery: false, // 媒体查询( @media screen 之类的)中不生效
            minPixelValue: 12, // px小于12的不会被转换
          })
        ]
      },
      sass: {
        prependData: '@import "@/styles/variables.scss";',
      },
      less: {
        modifyVars: {
          // hack: `true; @import "${mainTheme}";`
          hack: 'true; @import "~@/styles/vant-ui-main-theme.less"'
        }
      },
    },
  },
  configureWebpack: {
    // devtool: 'none',
    // devtool: 'source-map',
    resolve: {
      extensions: ['.js', '.json', '.sass', '.css', '.vue'],
    },
  },
};
